<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>客房列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        /**
         * dom加载完成之后，自动执行
         */
        $(function () {
            let adminHome = new AdminHome();
            // 获取客房列表数据
            adminHome.queryAll(null);
            // 初始化模态框
            adminHome.initModal();
            // 初始化点击事件
            adminHome.click();
        })

        class AdminHome {
            constructor() {
                this.initMenu();
            }
            /**
             * 初始化教师下拉菜单
             */
            initMenu(){
                $.ajax({
                    type:'get',
                    url:'/SelectCourse2/teacher/queryList',
                    cache: false,
                    dataType: 'json',
                    success:function (res){
                        console.log("请求老师数据：",res.result);
                        if(res.code == 1 && res.result){
                            // 动态生成下拉列表
                            $("#teacherId").append($(`
                              <option className = "disabled" readonly value="">请选择授课教师</option>
                        `))
                            for(let val of res.result){
                                $("#teacherId").append($(`
                                <option value="${val.userId}">${val.nickname}</option>
                            `))
                            }
                        }
                    },
                    error:function (err){
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position: 'top',
                            timeout: 2
                        });
                    }
                })
            }

            /**
             * 根据关键字从服务端获取客房列表信息
             * @param keywords
             * @param flag：首页：homePage,尾页：endPage,上一页：prePage,下一页：nextPage
             * @param page：分页数据
             */
            queryAll(keywords,flag,page) {
                if (!keywords) {
                    keywords = "";
                }
                // 为了防止添加的数据重复，所以需要清空之前添加的数据
                $(".table tbody").empty();
                // 根据情况组装url
                let url = `/SelectCourse2/course/queryAll?keywords=${keywords}`
                if(flag && page){
                    switch (flag){
                        case 'homePage':// 首页
                            url =`/SelectCourse2/course/queryAll?keywords=${keywords}&currentPage=1`
                            break;
                        case 'endPage':// 尾页
                            url =`/SelectCourse2/course/queryAll?keywords=${keywords}&currentPage=${page.totalPage}`
                            break;
                        case 'prePage':// 上一页
                            url =`/SelectCourse2/course/queryAll?keywords=${keywords}&currentPage=${page.prePage}`
                            break;
                        case 'nextPage':// 下一页
                            url =`/SelectCourse2/course/queryAll?keywords=${keywords}&currentPage=${page.nextPage2}`
                            break;
                    }
                }
                // 我们在前端访问服务端接口使用jQuery提供的ajax
                $.ajax({
                    type: 'GET',// 提交方式，跟接口规定的一致
                    url: url,// url服务端的接口地址
                    cache: false,// 不启用缓存
                    dataType: 'json',// 期望后端返回的数据的类型
                    success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
                        console.log("返回客房列表信息", JSON.stringify(res))
                        if (res.code == 1) {// 数据查询成功
                            // 判断后端是否传过来列表数据
                            if (res.result && res.result.length > 0) {// 有数据
                                // 遍历客房数据
                                for (let course of res.result) {
                                    $(`
                                      <tr>
                                        <td class="text">${course.courseId}</td>
                                        <td class="text">${course.courseName}</td>
                                        <td class="text">${course.textbook}</td>
                                        <td class="text">${course.nickname}</td>
                                        <td class="text">${course.credit}</td>
                                        <td class="text">${course.classHours}</td>
                                        <td class="text">
                                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-course-id=${course.courseId}
                                    data-course-name=${course.courseName} data-textbook=${course.textbook} data-nickname=${course.nickname} data-teacher-id=${course.teacherId}
                                    data-credit=${course.credit} data-class-hours=${course.classHours} >编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-course-id=${course.courseId}>删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
                                }

                            } else {// 无数据
                                $(`
                                  <tr>
                                      <td colspan="8" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                            }
                            // 处理分页数据（）
                            if(res.page){
                                $("#pagination").empty();
                                $("#pagination").append($(`
                                <li><a href="javascript:void(0);" id="homePage">首页</a></li>
                                <li><a href="javascript:void(0);" id="prePage">上一页</a></li>
                                <li><a href="javascript:void(0);" id="nextPage">下一页</a></li>
                                <li><a href="javascript:void(0);" id="endPage">尾页</a></li>
                                <li style="border: none;margin-left: 20px;" disabled>
                                    <span style="color:#888 !important;">当前第${res.page.currentPage}页，共${res.page.totalPage}页</span>
                                </li>
                                `))
                                // 因为这里是动态+异步，所以需要动态传参
                                $("#homePage").click(function (){
                                    pageClick('homePage',res.page)
                                })
                                $("#endPage").click(function (){
                                    pageClick('endPage',res.page)
                                })
                                $("#prePage").click(function (){
                                    pageClick('prePage',res.page)
                                })
                                $("#nextPage").click(function (){
                                    pageClick('nextPage',res.page)
                                })

                            }
                        } else {// 数据查询失败

                        }
                    },
                    error: function (err) {
                        console.log("Error=>", err);
                    }
                })
            }

            /**
             * 管理所有的点击事件
             */
            click() {
                // 点击事件中，无法获取到对象中的this
                let that = this;
                $("#searchBtn").click(function () {
                    // 获取搜索输入框中内容
                    let keywords = $("#searchValue").val();
                    // 访问服务器
                    that.queryAll(keywords);

                })
                // 提交表单
                $("#save-btn").click(function () {
                    that.save();
                })
                // 删除客房
                $("#del-btn").click(function (){
                    // 获取userId
                    let courseId = $("#courseId2").val()
                    if(courseId){
                        $.ajax({
                            type:'get',// 请求方式
                            url:'/SelectCourse2/course/delete?courseId='+courseId,// 请求url
                            cache:false,// 缓存
                            dataType:'json',// 期望服务端返回的类型
                            success:function (res){// res = {code:数值,msg:'字符串',result:[]/{}}
                                if(res.code==1){// 删除成功
                                    bootoast({
                                        message: res.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2  // 2秒之后消失
                                    });
                                }else{// 删除失败
                                    bootoast({
                                        message: res.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }
                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#deleteModal').modal('hide')
                            },
                            error:function (err){
                                console.log("course-delete---Error=>",err)
                                bootoast({
                                    message: '服务器响应异常',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }
                        })
                    }

                })
            }

            /**
             * 修改客房信息
             * @returns {boolean}
             */
            save() {
                let that = this;
                // 非空校验
                let courseId = $("#courseId").val();
                let courseName = $("#courseName").val();
                let textbook = $("#textbook").val();
                let nickname = $("#nickname").val();
                let credit = $("#credit").val();
                let classHours = $("#classHours").val();
                let teacherId = $("#teacherId option:selected").val();
                console.log("----------------teacherId:",teacherId)

                // 进行非空校验
                if (!courseName || courseName === '') {
                    bootoast({
                        message: '客房名称不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!textbook || textbook === '') {
                    bootoast({
                        message: '入住人数不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }

                if (!credit || credit === '') {
                    bootoast({
                        message: '价格不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!classHours || classHours === '') {
                    bootoast({
                        message: '请选择是否空闲！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!teacherId || teacherId === '') {
                    bootoast({
                        message: '房型不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                console.log(`courseId=${courseId}&courseName=${courseName}&textbook=${textbook}&textbook=${textbook}&nickname=${nickname}&credit=${credit}&classHours=${classHours}&teacherId=${teacherId}`);
                // 提交表单
                $.ajax({
                    type: 'post',// 提交方式 post
                    url: $("#myForm").attr("action"),// /SelectCourse/course/update
                    cache: false,// 不启用缓存
                    data: `courseId=${courseId}&courseName=${courseName}&textbook=${textbook}&textbook=${textbook}&nickname=${nickname}&credit=${credit}&classHours=${classHours}&teacherId=${teacherId}`,
                    dataType: 'json',// 期望服务器响应的数据类型 json
                    success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                        console.log(result);
                        // 提示
                        bootoast({
                            message: result.msg,
                            type: 'success',
                            position: 'top',
                            timeout: 2
                        });
                        // 更新列表
                        that.queryAll(null);
                        // 关闭修改模态框
                        $('#exampleModal').modal('hide')
                    },
                    error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                        // 提示
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position: 'top',
                            timeout: 2
                        });
                    }

                })
                return true;
            }

            /**
             * 管理模态框
             */
            initModal() {
                // 处理修改模态框
                $('#exampleModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
                    //------------------------------------------------------------------改动开始1
                    let courseId = button.data('course-id');// 绿色key对应data-key
                    let courseName = button.data('course-name');
                    let teacherId = button.data('teacher-id');
                    let textbook = button.data('textbook');
                    let nickname = button.data('nickname');
                    let credit = button.data('credit');
                    let classHours = button.data('class-hours');
                    //------------------------------------------------------------------改动结束1
                    var modal = $(this)
                    //------------------------------------------------------------------改动开始2
                    // 给模态框中的表单绑定数据（处理常规的input标签）
                    modal.find('.modal-body #courseId').val(courseId)
                    modal.find('.modal-body #courseName').val(courseName)
                    modal.find('.modal-body #textbook').val(textbook)
                    modal.find('.modal-body #nickname').val(nickname)
                    modal.find('.modal-body #credit').val(credit)
                    modal.find('.modal-body #classHours').val(classHours)
                    // 处理授课教师（下拉框）
                    modal.find(`.modal-body #teacherId option[value=${teacherId}]`).attr("selected", true);
                    //------------------------------------------------------------------改动结束2
                })
                // 处理删除模态框
                $('#deleteModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
                    //------------------------------------------------------------------改动开始1
                    let courseId = button.data('course-id');// 绿色key对应data-key
                    //------------------------------------------------------------------改动结束1
                    var modal = $(this)
                    //------------------------------------------------------------------改动开始2
                    // 给模态框中的表单绑定数据（处理常规的input标签）
                    modal.find('.modal-body #courseId2').val(courseId)
                    //------------------------------------------------------------------改动结束2
                })

            }
        }

        /**
         * 分页按钮点击事件
         * @param option
         */
        function pageClick(flag,page){
            let keywords = $("#searchValue").val();
            let adminHome = new AdminHome();
            adminHome.queryAll(keywords,flag,page)


        }

    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">客房管理</a></li>
        <li class="active">客房列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th>房间号</th>
                    <th>入住人数</th>
                    <th>价格</th>
                    <th>是否空闲</th>
					<th>房型</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->
                </tbody>
            </table>
            <!-- 分页组件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">

                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<!-- 模态框：实现客房信息的展示与修改-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <!-- 编辑界面的标题-->
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑客房信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单（输入组件），从添加复制过来，改一改 -->
                <form action="/SelectCourse2/course/update" method="post" id="myForm">
                    <!-- 编号，也就是主键ID,修改的时候一定要有这个，并且要设置为不可编辑（readonly）-->
                    <div class="form-group">
                        <label for="courseId">编<span style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="courseId" id="courseId" readonly>
                    </div>
                    <!-- 客房名称-->
                    <div class="form-group">
                        <label for="courseName">客房名称：</label>
                        <input type="text" class="form-control" name="courseName" id="courseName" placeholder="请输入客房名称">
                    </div>
                    <!-- 入住人数 -->
                    <div class="form-group">
                        <label for="textbook">入住人数：</label>
                        <input type="text" class="form-control" name="textbook" id="textbook" placeholder="请输入入住人数">
                    </div>
                    <!-- 价格 -->
                    <div class="form-group">
                        <label for="teacherId">价格：</label>
                        <select class="form-control" id="teacherId">
                        </select>
                    </div>
                    <!-- 是否空闲-->
                    <div class="form-group">
                        <label for="credit">是否空闲：</label>
                        <input type="text" class="form-control" name="credit" id="credit" placeholder="请输入学分">
                    </div>
     <!-- 房型-->
     <div class="form-group">
         <label for="classHours">房<span style="color:transparent;user-select: none;">隐藏</span>型：</label>
         <input type="text" class="form-control" name="classHours" id="classHours" placeholder="请输入房型">
     </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框：实现客房信息的删除-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前客房？
                <!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
                <input type="hidden" id="courseId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
<!--删除元素模态框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前学生？
                <input type="hidden" id="userId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>